import React, { useState } from 'react';
import { LaptopOutlined, NotificationOutlined, CheckSquareOutlined, AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import {useNavigate} from "react-router-dom"
import shuju from  '../../../../router/shuju'
import { Breadcrumb, Layout, Menu, theme } from 'antd';


import { Outlet } from 'react-router-dom';

const { Header, Content, Sider } = Layout;
type MenuItem = Required<MenuProps>['items'][number];


interface Props {

}
function Vehicle(props:Props) {
    let navigate=useNavigate()
    const [lujing, setLujing] = useState([]);
  function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
  ): MenuItem {
    return {
      key,
      icon,
      children,
      label,
    } as MenuItem;
  }
  
  const items2: MenuItem[] = [
    getItem('用车管理', '/index/Vehicle/management', <AppstoreOutlined />),
    getItem('用车记录', '/index/Vehicle/carscore', <CheckSquareOutlined />),
    getItem('还车记录', '/index/Vehicle/returncar', <CheckSquareOutlined />),
  ]
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  
  var tiao = (e: any) => {
    var lujing = e.keyPath.reverse()
    setLujing(lujing)
    navigate(e.key)
  }
    return (
        <div className='vehicle'>
             <Layout>
        <Sider width={200} style={{ backgroundColor:'white' }}>
        <Menu theme="light" defaultSelectedKeys={['/index/Vehicle/management']} mode="inline" items={items2}  onClick={tiao}></Menu>;


  

        </Sider>
        <Layout style={{ padding: '0 24px 24px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>首页</Breadcrumb.Item>
            {
                lujing.map((item, index) => {
                  return (
                    <Breadcrumb.Item key={index}>{shuju[item]}</Breadcrumb.Item>
                  )
                })
              }
          </Breadcrumb>
          <Content
            style={{
              margin: 0,
              minHeight: 480,
              background: colorBgContainer,
            }}
          >
            <Outlet></Outlet>
          </Content>
        </Layout>
      </Layout>
    </div>
        
    );
}

export default Vehicle;